<template>
  <el-dialog :title="vehicleForm.id ? '编辑车型':'新增车型'" :visible="visible" width="600px" @close="$emit('update:visible',false)">
    <el-form ref="vehicleForm" :model="vehicleForm" label-width="110px" label-position="right" style="width: 100%" :rules="vehicleFormRules">
      <el-form-item label="车辆类型" prop="name">
        <el-input v-model="vehicleForm.name" placeholder="请输入车辆类型" />
      </el-form-item>
      <el-form-item label="应载重量" prop="allowableLoad">
        <el-input v-model.number="vehicleForm.allowableLoad" placeholder="请输入车型载重">
          <template #suffix>
            <span>吨</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="应载体积" prop="allowableVolume">
        <el-input v-model.number="vehicleForm.allowableVolume" placeholder="请输入车型载重">
          <template #suffix>
            <span>立方</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="长" prop="measureLong">
        <el-input v-model.number="vehicleForm.measureLong" placeholder="请输入车型载重">
          <template #suffix>
            <span>米</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="宽" prop="measureWidth">
        <el-input v-model.number="vehicleForm.measureWidth" placeholder="请输入车型载重">
          <template #suffix>
            <span>米</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="高" prop="measureHigh">
        <el-input v-model.number="vehicleForm.measureHigh" placeholder="请输入车型载重">
          <template #suffix>
            <span>米</span>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="center">
      <el-button type="primary" class="submitBtn" @click="submitBtn">确认</el-button>
      <el-button plain @click="$emit('update:visible',false)">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { addVehicleAPI, getVehicleDetailsAPI, updateVehicleAPI } from '@/api/car-models'
export default {
  name: 'VehicleDialog',
  props: { visible: Boolean },
  data() {
    return {
      vehicleForm: {
        'allowableLoad': 0,
        'allowableVolume': 0,
        'goodsTypes': [
          {
            'defaultVolume': 0,
            'defaultWeight': 0,
            'id': 0,
            'name': 'string',
            'remark': 'string',
            'status': 0,
            'truckTypes': [
              {}
            ]
          }
        ],
        'measureHigh': 0,
        'measureLong': 0,
        'measureWidth': 0,
        'name': ''
      },
      vehicleFormRules: {
        allowableLoad: [{ message: '不能为空', trigger: 'blur', required: true }],
        allowableVolume: [{ message: '不能为空', trigger: 'blur', required: true }],
        measureHigh: [{ message: '不能为空', trigger: 'blur', required: true }],
        measureLong: [{ message: '不能为空', trigger: 'blur', required: true }],
        measureWidth: [{ message: '不能为空', trigger: 'blur', required: true }],
        name: [{ message: '不能为空', trigger: 'blur', required: true }]
      }
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        // 清空表单
        this.$refs.vehicleForm.resetFields()
        this.vehicleForm = {
          'allowableLoad': 0,
          'allowableVolume': 0,
          'goodsTypes': [
            {
              'defaultVolume': 0,
              'defaultWeight': 0,
              'id': 0,
              'name': 'string',
              'remark': 'string',
              'status': 0,
              'truckTypes': [
                {}
              ]
            }
          ],
          'measureHigh': 0,
          'measureLong': 0,
          'measureWidth': 0,
          'name': ''
        }
      }
    }
  },
  methods: {
    // 确认按钮--根据是否有id判断是添加还是编辑
    submitBtn() {
      this.$refs.vehicleForm.validate().then(async() => {
        if (this.vehicleForm.id) {
          await updateVehicleAPI(this.vehicleForm)
          this.$message.success(`编辑id为${this.vehicleForm.id}的车型成功`)
        } else {
          await addVehicleAPI(this.vehicleForm)
          this.$message.success('新增车型成功')
        }
        this.$emit('update:visible', false) // 关闭弹框
        this.$emit('getVehiclePage', 1) // 通知父组件更新刷新页面,并查询第一页
      }, (err) => {
        console.log(err)
      })
    },
    // 数据回填
    async getVehicleDetails(id) {
      const { data } = await getVehicleDetailsAPI(id)
      this.vehicleForm = data
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__header{
  padding: 15px 30px 15px;
  background-color: #f3f4f7;
    border-radius: 8px 8px 0 0;
}
::v-deep .el-dialog{
  border-radius: 8px;
}
::v-deep .el-form{
  padding-right: 40px;
  margin-top: 10px;
}
::v-deep .el-button{
  width: 90px;
  border-radius: 5px;
  font-weight: 400;
  margin-top: 10px;
}
::v-deep .el-button.submitBtn{
  color: #fff;
  background-color: #e15536;
  border: 1px solid #e15536;
}
::v-deep .el-input__suffix-inner{
  color: rgb(32, 35, 42);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    margin-right: 14px;
}
</style>
